<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" :offset="9">
        <p>京师壹心心理云平台</p>
        <p>测评系统-运营端</p>
        <div class="input">
          <el-input v-model="account" placeholder="请输入账号"></el-input>
        </div>
        <div class="input">
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
        </div>
        <div class="input">
          <el-row :gutter="20">
            <el-col :span="17">
              <el-input placeholder="请输入验证码" v-model="smsCode"></el-input>
            </el-col>
            <el-col :span="7" v-if="this.isCode">
              <el-button type="primary" disabled>{{this.codeNum}}s后尝试</el-button>
            </el-col>
            <el-col :span="7" v-else>
              <el-button type="primary" @click="getCode">获取验证码</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="input">
          <el-button type="primary" @click="checkFn">登录</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {APILOGIN, APILOGINCODE} from '@/common/api.js'
export default {
  data () {
    return {
      account: '',
      password: '',
      smsCode: '',
      isCode: false,
      codeNum: 30
    }
  },
  methods: {
    getCode () {
      APILOGINCODE({
        account: this.account,
        password: this.password
      }).then((res) => {
        this.$message.success(res.msg)
        this.isCode = true
        this.codeNum = 30
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    checkFn () {
      if (this.account === '') {
        this.$message.error('账号不能为空')
        return false
      }
      if (this.password === '') {
        this.$message.error('密码不能为空')
        return false
      }
      if (this.smsCode === '') {
        this.$message.error('验证码不能为空')
        return false
      }
      this.submit()
    },
    submit () {
      APILOGIN({
        account: this.account,
        password: this.password,
        smsCode: this.smsCode
      }).then((res) => {
        this.$cookies.set('name', this.account)
        sessionStorage.setItem('token', res.data.token)
        sessionStorage.setItem('exit_without_operation', res.data.exit_without_operation)
        sessionStorage.setItem('password_complexity_status', res.data.password_complexity_status)
        sessionStorage.setItem('password_expiration_status', res.data.password_expiration_status)
        this.$router.push({path: '/school'})
        location.reload()
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  },
  watch: {
    isCode (val) {
      if (val === true) {
        var _this = this
        var time = window.setInterval(function () {
          _this.codeNum -= 1
          if (_this.codeNum <= 0) {
            _this.isCode = false
            clearInterval(time)
          }
        }, 1000)
      }
    }
  }
}
</script>
<style scoped>
p {
  text-align: center;
  font-weight: 16px;
  font-weight: 700;
}
p:nth-child(1){
  font-size: 30px;
}
.input {
  margin-bottom: 20px;
}
.input>button{
  width: 100%;
}
</style>
